<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>扫描二维码</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<style>
			.QrImg{
				width: 100%;
			
			}
			.childHead{
			
			}
			.childHead ul li{
				width: 50%;
				float: left;
				left: 50%;
				text-align: center;
			
				margin-top: -30px;
				margin-bottom: 50px;
			}
			.childHead ul li.margin{
				margin-left: 24%;
			}
			.childHead ul li.margin1{
				
			}
			.childHead ul{
				position: relative;
				
			}
			.childHead ul li>img{
				width: 80px;
				height: 80px;
				border-radius: 100%;
			}
			.QrContent{
				background: #fff;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				margin-top: -20px;
				z-index: 998;
				position: relative;
				width: 100%;
			} 
			.QrTu{
				background:url(../images/Qrbackground.png) no-repeat;
				background-size:100% 100%;
				width: 140px;
				height: 140px;
				text-align: center;
				left: 50%;
				position: relative;
				margin-left: -70px;
				margin-top: 10px;
			}
			.QrTu img{
				width: 130px;
				height: 130px;
				
			}
			.childHead .title{
				font-size: 14px;
				font-weight: bold;
				margin-top: 10px;
			}
			#ent{
			
				position: fixed;
				text-align: center;
				width: 180px;
				height: 40px; 
				line-height: 40px;
				color: #fff;
				margin: 0 auto;
				font-size: 18px;
				font-weight: bold;
				background: #ffae00;
				border-radius: 50px;
				bottom:20px;
				left: 50%;
				margin-left: -90px;
				z-index: 999;
				
			}
			.qrcode{
				margin: 0px 0 0 5px;
				padding-top: 3px;
				position: absolute;
			}
			#mask{
				background:#fff;
				opacity: 1; 
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 999;
				top: 0;
				display: none; 
				bottom: 0;
			}
			#chargeImg{
				position: absolute;
				width: 200px;
				height:200px; 
				z-index: 1000;
				left: 50%;
				top: 50%;
				margin-top: -100px;
				margin-left: -100px;
				display: none;
			}
			
		</style>
	</head>

	<body>
		<div id="Qr">
			<img class="QrImg" id="QrImg" src="" />
			<div class="QrContent">
				<div class="childHead">
					<ul>
						
						<li v-for="(item,index) in items" @tap="push()"> 
							<img :src="item.child_avatar" style="border:solid 1px #ffb310" />
							<div class="title">{{item.child_name}}</div>
							<div class="QrTu">
								<p class="qrcode" @tap="previewimg($event,item,index)"></p> 
							</div>
						</li> 
						
					</ul>
				</div>
			</div>
			
			<div id="ent" @tap="ent()">进入首页</div>
			<div id="mask">	
			</div>
			<img id="chargeImg" src="" />
		</div>
		<script src="../js/jquery-1.11.3.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/qrcode.js"></script>
		<script type="text/javascript">
			
			mui.plusReady(function(){
				
				var state = app.getState();
				var memberToken = state.memberToken
				var uid = state.uid;
				var code = state.code;
				var ava = state.avatar
				Qr.items = code ;
				mui.post(Apiurl+'index/banner',{
					uid:uid,
					memberToken:memberToken,
					type:9
				},function(res){
					//alert(res[0].banner_pic)
					//document.getElementById('ceshi').style.background="url("+res[0].banner_pic+")"
					document.getElementById('QrImg').src=res[0].banner_pic 
					/*var Img = document.createElement('img');
					Img.src = res[0].banner_pic;
					document.getElementById('Qr').append(Img)*/
				},'json')  

			})
			
			var Qr = new Vue({
            el: '#Qr',
            data: { 
                items: [],
                banners:[]
              
            },
            methods:{
            	ent: function(){ 
            		mui.openWindow({
                    url: 'main.html',
                    id: 'main',
                    preload: true, 
                    show: {
                        aniShow: 'pop-in'
                    },
                    
                    waiting: {
                        autoShow: false
                    }
                });
            	},
            	previewimg: function(event,item, index) {
            				var imgsrc = event.srcElement.src
            				if(imgsrc){
            					imgsrc = imgsrc
            				}else{
            					imgsrc = convertCanvasToImage(event.srcElement).src
            				}
							document.getElementById('mask').style.display="block";
							document.getElementById('chargeImg').style.display="block";
							document.getElementById('chargeImg').src = imgsrc;
						},
            },
           	mounted: function(){
           		
           		setTimeout(function(){
           			var aa=[];
           			for(var i=0;i<Qr.items.length;i++){
			       	     aa.push(Qr.items[i].code)
 					}
           			for(var i=0;i<aa.length;i++){
           				/* var timestamp = new Date().getTime() + Math.random().toString().split(".")[1]; */ // 时间戳 + 随机数
           				var timestamp="div"+i;
           				$(".qrcode")[i].setAttribute('id',timestamp)
           				var qrcode = new QRCode(timestamp, {
			        	
			            width: 140,
			            height: 140,
			            colorDark: '#000000',
			            colorLight: '#ffffff',
			            correctLevel: QRCode.CorrectLevel.L
			        	});
			        	qrcode.makeCode(aa[i]) 
           			}
           			$(".qrcode").each(function(){
			        var timestamp = new Date().getTime() + Math.random().toString().split(".")[1];  // 时间戳 + 随机数
			        
			        $(this).attr("id", timestamp);
			         
			
			        var qrcode = new QRCode(timestamp, {
			        	
			            width: 140,
			            height: 140,
			            colorDark: '#000000',
			            colorLight: '#ffffff',
			            correctLevel: QRCode.CorrectLevel.L
			        });
			       
			         //qrcode.makeCode(aa[i])  
			        
			    })  
           		},500)
           	}
			})

			function convertCanvasToImage(canvas) {
				var image = new Image();
				image.src = canvas.toDataURL("image/png");
				return image;
			}
			document.getElementById('mask').addEventListener('tap',function(){
				this.style.display="none";
				document.getElementById('chargeImg').style.display="none";
			}) 
			var backButtonPress = 0;
        mui.back = function(event) {
            var ws = plus.webview.currentWebview()
            mishuWebview = plus.webview.getWebviewById('ScanQRcodez');
            if (mishuWebview) {
                mishuWebview.close();
            }else {
                backButtonPress++;
                if (backButtonPress > 1) {
                    plus.runtime.quit();
                } else {
                    plus.nativeUI.toast('再按一次退出应用');
                }
                setTimeout(function() {
                    backButtonPress = 0;
                }, 1000);
                return false;
            }
        };
      
		</script>
	</body>

</html>